<template>
    <div class="comment" :class="model.level == 1? 'parent':'children'">
        <div>
            <div class="avatar large" v-if="model.level == 1">
                <img class="avatar-img" src="/static/img/avatar/aklin.jpg">
            </div>
            <div class="avatar small" v-if="model.level != 1">
                <img class="avatar-img" src="/static/img/avatar/aklin.jpg">
            </div>
            <div class="media-body">
                <h4 class="head">{{model.name}}&nbsp&nbsp<small class="head-small">{{model.created_at}}</small></h4>
                <div class="content">{{model.content}}</div>
            </div>
            <div class="media-footer">
                <a class="reply" @click="reply(model.id)" href="javascript:void(0)">回复</a>
            </div>
            <div class="reply-board" v-if="model.id == key">
                <div slot="header" class="clearfix">
                     <a class="cancel" @click="cancel()" href="javascript:void(0)">取消评论</a>
                </div>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-input
                                placeholder="你的昵称*"
                                prefix-icon="el-icon-search"
                                v-model="nickname">
                        </el-input>
                    </el-col>
                    <el-col :span="8">
                        <el-input
                                placeholder="您的邮箱*（不会被公开）"
                                prefix-icon="el-icon-search"
                                v-model="email">
                        </el-input>
                    </el-col>
                    <el-col :span="8">
                        <el-input
                                placeholder="您的网址"
                                prefix-icon="el-icon-search"
                                v-model="website">
                        </el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="text-input">
                    <el-col :span="24">
                        <el-input placeholder="留下足迹吧，反正又不会怀孕" type="textarea" v-model="remark"></el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="comment-btn">
                    <el-col :span="24">
                        <el-button class="reply-btn" type="primary" @click="commit()">发表评论</el-button>
                    </el-col>
                </el-row>
            </div>
        </div>
        <comment v-for="(comment,index) in model.children" :model="comment" :key="index" :cbus="cbus"></comment>
    </div>
</template>

<script>
    import {log,buildParams} from '@/assets/js/util.js'
    export default{
        props:['model','cbus'],
        name: 'comment',
        data () {
            return {
                msg: 'comment',
                key:0,
                nickname:'',
                email:'',
                website:'',
                remark:'',
                parent:0,
            }
        },
        methods:{
            reply:function (id) {
                this.cbus.$emit('sendkey',id)
            },
            cancel:function () {
                this.cbus.$emit('sendkey',0)
            },
            handleKey:function (id) {
                this.key = id
            },
            commit:function () {
                var params = {}
                params.parent   = this.key
                params.nickname = this.nickname
                params.email   = this.email
                params.website = this.website
                params.remark  = this.remark
                this.cbus.$emit('sendParams',params)
                this.clear()
            },
            clear:function () {
                this.nickname = ''
                this.email    = ''
                this.website  = ''
                this.remark   = ''
                this.cbus.$emit('sendkey',0)
            },
        },
        mounted:function () {
            this.cbus.$on('sendkey',this.handleKey)
        }
    }
</script>

<style>
    .comment{
    }
    .avatar{
        margin: 10px;
        display: inline-block;
        overflow: hidden;
        margin-right: 15px;
        border-radius: 50%;
        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
        0 1px 18px 0 rgba(0, 0, 0, 0.12),
        0 3px 5px -1px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0 6px 10px 0
        rgba(0, 0, 0, 0.14),
        0 1px 18px 0 rgba(0, 0, 0, 0.12),
        0 3px 5px -1px rgba(0, 0, 0, 0.2);
    }
    .avatar-img{
        width: 100%;
    }
    .large{
        width: 64px;
        height: 64px;
    }
    .small{
        width: 40px;
        height: 40px;
    }
    .head-small{
        font-size: 75%;
        font-weight: 400;
        line-height: 1;
        color: #777;
    }
    .media-body{
        overflow: hidden;
        display: inline-block;
    }
    .media-footer{
        height: 21px;
        box-sizing: border-box;
    }
    .content{
        margin: 0 0 10px;
        color: #555;
        font-size: 16px;
        line-height: 1.6em;
    }
    .children{
        padding-left: 40px;
    }
    .media-body .head{
        color: #3c4858;
        text-decoration: none;
        word-wrap: break-word;
        margin-top: 0;
        margin-bottom: 5px;
        font-size: 17px;
        line-height: 1.55em;
    }
    .reply{
        float: right;
        text-decoration: none;
        color: #66b1ff;
    }
    .cancel{
        text-decoration: none;
        color: #66b1ff;
    }
    .reply-board{
        margin-top: 10px;
    }
    .reply-btn{
        float: right;
    }
</style>